<template>
  <!-- 头部导航 -->
  <el-header style="padding: 0;margin: 0">
    <el-affix :offset="0">
      <div id="headDiv">
        <div>
          <el-button type="warning" size="large" style="margin-left: 40px" @click="$router.push('admin')" round>
            <el-icon>
              <House/>
            </el-icon>
            首页
          </el-button>
        </div>
        <div>
          <span style="color: #626262;margin-right: 20px">您好!</span>
          <el-button type="primary" size="large" @click="$router.push('statistics')" round>查看销售情况
          </el-button>
          <el-button size="large" type="danger" style="margin-right: 20px" @click="exitUser()" round>退出登录
          </el-button>
        </div>
      </div>
    </el-affix>
  </el-header>
  <!-- 头部导航end -->

  <!-- 商城logo -->
  <div style="width: 1800px;margin: 0 auto;height: 60px">
    <div style="font-size: 30px;margin: 20px 0">
      <a href="#" style="color:#545454;text-decoration: none;">LO<span style="color: #c4c4c4">V</span><span>O</span> |
        朗沃商城</a>
    </div>
  </div>
  <!-- 商城logo end -->

  <!-- 退货订单列表 -->
  <div>
    <!-- 表格部分 -->
    <el-table :data="returnOrderList">
      <el-table-column prop="returnOrderNo" label="退货订单编号" align="center"/>
      <el-table-column prop="buyOrderNo" label="购买订单编号" align="center"/>
      <el-table-column prop="payMethod" label="支付方式" align="center">
        <template #default="scope">
          {{ scope.row.payMethod === 0 ? "支付宝支付" : "预存款支付" }}
        </template>
      </el-table-column>
      <el-table-column prop="originMoney" label="应付金额" align="center"/>
      <el-table-column prop="payMoney" label="实付金额" align="center"/>
      <el-table-column prop="returnTime" label="申请退货时间" align="center"/>
      <el-table-column prop="returnStatus" label="订单状态" align="center">
        <template #default="scope">
          {{
            scope.row.returnStatus === 0 ? "申请退货" : scope.row.returnStatus === 1 ?
                "正在退货" : scope.row.returnStatus === 2 ? "已退款" : scope.row.returnStatus === 3 ?
                    "已入库" : scope.row.returnStatus === 4 ? "拒绝退货" : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="120px">
        <template #default="scope">
          <el-button type="success" @click="info(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格部分end -->

    <br><br>

    <!-- 分页部分 -->
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                   v-model:total="total" background @current-change="changeCurrentPage"/>

    <!-- 查询部分 -->
    <el-row>
      <el-col :span="18"/>
      <el-col :span="6">
        <h3>查询订单</h3><br>
        <el-form :model="data" ref="data" class="demo-ruleForm" label-position="left"
                 label-width="90px">
          <el-form-item prop="goodsName" label="商品名">
            <el-input oninput="value=value.replace(/\s*/g,'')" v-model="data.goodsName"
                      placeholder="请输入订单中的商品名" style="width: 148px"/>
          </el-form-item>
          <el-form-item prop="startTime" label="起始日期">
            <el-date-picker v-model="data.startTime" type="datetime" value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择起始日期"
                            style="width: 160px"/>
          </el-form-item>
          <el-form-item prop="endTime" label="结束日期">
            <el-date-picker v-model="data.endTime" type="datetime" value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择结束日期"
                            style="width: 160px"/>
          </el-form-item>
          <el-form-item>
            <el-button @click="reset()">重置</el-button>
            <el-button @click="changeCurrentPage()" type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 查询部分end -->
  </div>
  <!-- 退货订单列表end -->

  <!-- 查看退货订单详情对话框 -->
  <div>
    <el-dialog v-model="dialogVisible" title="退货订单详情" width="80%">
      <!-- 退货订单信息 -->
      <el-form :model="returnOrder" ref="returnOrder" class="demo-ruleForm" label-position="left"
               label-width="120px">
        <el-form-item prop="returnOrderNo" label="退货订单编号">
          <span>{{ returnOrder.returnOrderNo }}</span>
        </el-form-item>
        <el-form-item prop="returnTime" label="申请退货时间">
          <span>{{ returnOrder.returnTime }}</span>
        </el-form-item>
        <el-form-item prop="returnReason" label="退货原因">
          <span>{{ returnOrder.returnReason }}</span>
        </el-form-item>
        <el-form-item prop="returnStatus" label="订单状态">
          <span>{{
              returnOrder.returnStatus === 0 ? "申请退货" : returnOrder.returnStatus === 1 ?
                  "正在退货" : returnOrder.returnStatus === 2 ? "已退款" : returnOrder.returnStatus === 3 ?
                      "已入库" : returnOrder.returnStatus === 4 ? "拒绝退货" : ""
            }}</span>
        </el-form-item>
      </el-form>
      <!-- 退货订单信息end -->

      <el-divider content-position="left">退货规则</el-divider>
      <!-- 退货规则列表 -->
      <el-input oninput="value=value.replace(/\s*/g,'')" v-model="this.searchRule"
                placeholder="请输入您要查询的退货规则" style="width: 200px"/>&nbsp;&nbsp;&nbsp;
      <el-button @click="ruleChangeCurrentPage()" type="primary">查询</el-button>
      <el-button @click="ruleReset()">重置</el-button>
      <el-table :data="returnRuleList">
        <el-table-column prop="ruleNo" label="退货规则编号" align="center"/>
        <el-table-column prop="ruleContent" label="退货规则内容" align="center"/>
      </el-table>

      <br><br>

      <!-- 分页部分 -->
      <el-pagination v-model:current-page="ruleCurrentPage" v-model:page-size="rulePageSize"
                     v-model:total="ruleTotal" background @current-change="ruleChangeCurrentPage"/>
      <!-- 退货规则列表end -->

      <template #footer>
      <span class="dialog-center">
        <el-button type="success" @click="agree(returnOrder)" :disabled="returnOrder.returnStatus!==0">同意退货
          </el-button>
          <el-button type="danger" @click="refuse(returnOrder)" :disabled="returnOrder.returnStatus!==0">拒绝退货
          </el-button>
        <el-button type="warning" @click="dialogVisible=false">确定</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
  <!-- 查看退货订单详情对话框end -->
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "ReturnOrderAudit",
  created() {
    let admin = sessionStorage.getItem("adminNo");
    if (admin == null) {
      this.$router.push("newLogin");
    } else {
      this.admin = admin;
    }
    this.config = {
      headers: {
        'admin': this.admin
      }
    };
    this.loadData();
    this.refresh();
  },
  data() {
    return {
      // 当前页
      currentPage: 1,
      // 每页展示条数
      pageSize: 2,
      // 总条数
      total: 0,
      // 对话框是否展示标识
      dialogVisible: false,
      // 当前页
      ruleCurrentPage: 1,
      // 每页展示条数
      rulePageSize: 2,
      // 总条数
      ruleTotal: 0,
      // 退货订单集合
      returnOrderList: [],
      // 退货订单
      returnOrder: {},
      // 查询信息
      data: {
        userId: sessionStorage.getItem("userId"),
        goodsName: "",
        startTime: "",
        endTime: ""
      },
      // 退货规则集合
      returnRuleList: [],
      // 查询规则
      searchRule: ""
    }
  },
  methods: {
    // 轮询数据
    refresh() {
      let timer = setInterval(function () {
        axios.post("/api/returnOrder/adminQueryReturnOrderByIdAndGoodsName", {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          data: this.data
        }, this.config).then(response => {
          if (response.data.code === 200) {
            this.loadData();
            // clearInterval(timer);
          } else {
            ElMessage.error(response.data.msg);
          }
        });
      }.bind(this), 5000);
    },
    // 加载数据
    loadData() {
      axios.post("/api/returnOrder/adminQueryReturnOrderByIdAndGoodsName", {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        data: this.data
      }, this.config).then(response => {
        if (response.data.code === 200) {
          this.returnOrderList = response.data.data.data.records;
          this.total = response.data.data.data.total;
        } else {
          ElMessage.error(response.data.msg);
        }
      });
    },
    // 同意退货
    agree(returnOrder) {
      returnOrder.returnStatus = 1;
      this.requestTo(returnOrder);
    },
    // 拒绝退货
    refuse(returnOrder) {
      returnOrder.returnStatus = 4;
      this.requestTo(returnOrder);
    },
    // 修改退货订单状态
    requestTo(returnOrder) {
      axios.post("/api/returnOrder/modifyReturnOrderStatus", returnOrder, this.config).then(response => {
        if (response.data.code === 200) {
          // 重新刷新页面数据
          this.loadData();
        } else {
          ElMessage.error(response.data.msg);
        }
      })
    },
    // 重置查询条件
    reset() {
      this.$refs.data.resetFields();
      this.loadData();
    },
    // 表格页面跳转
    changeCurrentPage() {
      this.loadData();
    },
    // 退出登录
    exitUser() {
      sessionStorage.clear();
      this.$router.push("newLogin")
    },
    // 获取退货规则列表
    loadRule() {
      axios.post("/api/rule/queryRuleByRuleContent", {
        currentPage: this.ruleCurrentPage,
        pageSize: this.rulePageSize,
        data: this.searchRule
      }, this.config).then(response => {
        if (response.data.code === 200) {
          this.returnRuleList = response.data.data.records;
          this.ruleTotal = response.data.data.total;
        } else {
          ElMessage.error(response.data.msg);
        }
      });
    },
    // 确定
    cancel() {
      // 重置退货规则查询条件
      this.searchRule = "";
      // 关闭对话框
      this.dialogVisible = false;
    },
    // 跳转审核页面
    info(data) {
      this.returnOrder = data;
      this.searchRule = "";
      // 获取退货规则数据
      this.loadRule();
      // 使展示框可见
      this.dialogVisible = true;
    },
    // 退货规则表格跳转
    ruleChangeCurrentPage() {
      // 更新退货规则
      this.loadRule();
    },
    // 重置退货规则查询条件
    ruleReset() {
      // 重置退货规则查询条件
      this.searchRule = "";
      // 获取退货规则数据
      this.loadRule();
    }
  }
}
</script>

<style>
#headDiv {
  width: 100%;
  background-color: white;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 5px 10px gray;
}
</style>